<template>
	<view class="content">
		<view class="MyIndex">
			<u-image width="100%" height="350" src="https://xdsbz.com:802/prod-api/profile/upload/my/1.jpg"></u-image>
		</view>
		<view class="my_con">
			<view class="my_con_left">
				<!-- 头像 -->
				<view class="avatar">
					<u-avatar :src="avatar"></u-avatar>
				</view>
				<!-- 昵称 -->
				<view class="avatar_text">
					{{infoData.phoneNumber}}
				</view>
			</view>
		</view>
		<!-- 工具卡 -->
		<view class="card">
			<u-cell-item @click="clickFun(5)" :iconStyle="{'color':'#C49266'}"  icon="file-text" title="加盟店申请"
				:arrow="false"></u-cell-item>
			<u-cell-item @click="clickFun(6)" :iconStyle="{'color':'#C49266'}" :border-bottom="false" icon="search"
				title="门店查询" :arrow="false"></u-cell-item>
		</view>
		<!-- 退出登录 -->
		<!-- <button size="default" type="default" class="btn" @click="out">退出当前账号</button> -->



	</view>
</template>

<script>
	import {
		url
	} from "@/common/index.js"
	import {
		getBg
	} from '@/common/api.js'
	export default {
		name: "my",
		data() {
			return {
				avatar: "http://192.168.177.108:8082/profile/upload/2024/04/02/sxy_20240402205549A013.png",
				src: "",
				infoData:{}
			};
		},
		created() {
			this.getBg()
			this.infoData = uni.getStorageSync('userInfo')
		},
		methods: {
			async getBg() {
				let data = await getBg(121)
				this.src = url + data.rows[0].baUrl
			},

			clickFun(type) {
				if (type == 5 || type == 6) {
					let url = type == 5 ? '/pagesMy/my/applyfor' : '/pagesMy/my/store'
					uni.navigateTo({
						url: url
					})
				}
			},
			
			out(){
				uni.showModal({
					content:"是否退出登录?",
					confirmColor:"#C49266",
					success:res=>{
						console.log(res);
						if(res.confirm){
							uni.clearStorageSync();
							uni.reLaunch({
								url:"/pagesHome/home/home"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #222;
		height: 96vh;
		padding-top: 30rpx;
		position: relative;
		top: 0;
		left: 0;
	}

	.btn {
		width: 690rpx;
		background-color: rgba(68, 68, 68, 0.4);
		border-radius: 50rpx;
		margin: auto;
		font-size: 28rpx;
		font-weight: 400;
		color: #C49266;
		animation: moveRight 2s;
		/* 动画名称，持续时间，迭代次数 */
	}

	/* 定义动画 */
	@keyframes moveRight {
		from {
			transform: translateY(-200rpx);
		}

		to {
			transform: translateY(0);
			/* 从当前位置平移100像素 */
		}
	}

	.my_con {
		position: absolute;
		top: 50rpx;
		left: 30rpx;
		width: 690rpx;
		min-height: 260rpx;
		border-radius: 15rpx;
		margin: 0 auto;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		animation: moveRight 2s;
		/* 动画名称，持续时间，迭代次数 */
	}

	/* 定义动画 */
	@keyframes moveRight {
		from {
			transform: translateY(-200rpx);
		}

		to {
			transform: translateY(0);
			/* 从当前位置平移100像素 */
		}
	}

	.my_con_left {
		display: flex;
		margin-top: 30rpx;
	}

	.my_con_right {
		margin-top: 30rpx;
		width: 80rpx;
		height: 50rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 44rpx;
		font-size: 24rpx;
		background-color: #cccccc;
		color: #C49266;

	}

	.avatar {
		margin-right: 30rpx;
		z-index: 99;
	}

	.avatar_text {
		color: #C49266;
	}

	.card {
		width: 690rpx;
		margin: 30rpx auto;
		border-radius: 15rpx;
		padding: 20rpx 0;
		background-color: rgba(68, 68, 68, 0.4);
		animation: moveRight 2s;
		/* 动画名称，持续时间，迭代次数 */
	}

	/* 定义动画 */
	@keyframes moveRight {
		from {
			transform: translateY(-200rpx);
		}

		to {
			transform: translateY(0);
			/* 从当前位置平移100像素 */
		}
	}

	/deep/ .u-cell_title {
		color: #C49266;
	}

	.MyIndex {
		width: 690rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		overflow: hidden;
	}

	::deep .u-cell-hover {
		background-color: #222 !important;
	}
</style>